<template>
<div class="py">
  <div class="title">
    <div class="ss">
      <img src="../img/py/py.png" alt="" class="img1">
      <span class="snov">
      <span class="s1">动态</span>
      <span class="s2">附近</span>
    </span>
      <img src="../img/myyinyue/yinp.png" alt="" class="img2">
    </div>
    <div class="titlebot">
      <span>
        <img src="../img/py/xie.png" alt="">
        <span>发动态</span>
      </span>
      <span>
        <img src="../img/py/sp.png" alt="">
          <span>发布视频</span>
      </span>
    </div>
  </div>
  <div class="guanzhu">
    <p class="ti">
      我关注的他们
      <img src="../img/py/you.png" alt="">
    </p>
    <div class="other">
      <ul>
        <li v-for="(key,item) in userGzhuList" :key="item" @click="myfoucs(userGzhuList[item][item].userId)" ref="list">
          <span class="s1">
            <img :src=userGzhuList[item][item].avatarUrl alt="">
          </span>
          <span class="cil">
            <img src="../img/py/v.png" alt="">
          </span>
          <p class="s2">{{userGzhuList[item][item].nickname}}</p>
        </li>

      </ul>
    </div>
    <div class="fabu" v-for="(key,item) in userEvent ">
      <div class="left">
        <span class="s1">
          <img :src="userEvent[item].video.creator.avatarUrl" alt="">
        </span>
        <span class="s2">
          <img src="../img/py/v.png" alt="">
        </span>
      </div>
      <div class="right">
        <p class="ptitle">
          <span class="s1">{{userEvent[item].video.creator.nickname}}</span>
          <span class="s2">发布视频:</span>
        </p>
        <p class="p1">1分钟前</p>
        <p class="snk">
          {{userEvent[item].msg}}
        </p>
        <div class="play">
          <video :src=userEventId[item] :poster=userEvent[item].video.coverUrl controls></video>
          <div class="pl">
            <span>
            <img src="../img/py/dz.png" alt="">
              {{Uevent[item].likedCount}}
            </span>
            <span>
            <img src="../img/py/pl.png" alt="">
              {{Uevent[item].commentCount}}
            </span>
            <span>
            <img src="../img/py/zf.png" alt="">
            {{Uevent[item].shareCount}}
            </span>
            <span class="s4">
            <img src="../img/myyinyue/more.png" alt="">

            </span>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
        name: "py",
        computed:{
          ...mapState(['userEvent','userGzhuList','userEventId','Uevent']),
        },
        methods:{
          myfoucs(item){
          this.$router.push({path:'/foucslist',query:{items:item}});
          }
        },
        created(){
          this.$api.getUserEvent({uid:this.$storage.get('user').account.id});
          this.$api.getUserGzhu({uid:this.$storage.get('user').account.id});
        }

    }
</script>

<style lang="scss">
*{
  margin: 0px;
  padding: 0px;
}
  .py{
    width: 1245px;
    margin-bottom: 175px;
    .title{
      box-sizing: border-box;
      background-color: #c64b3e;
      padding: 70px 0 50px 0;
      font-size: 50px;
      color: white;
      position: relative;
      text-align: center;
      font-weight: bold;
      .ss{
        width: 100%;
        img{
          width: 85px;
          position: absolute;
          vertical-align: middle;
        }
        .img1{
          left: 40px;
        }
        .img2{
          right: 50px;
        }
        .snov{
          display: inline-block;
          margin: 0 auto;
          vertical-align: middle;
          width: 435px;
          height: 90px;
          border-radius: 45px;
          background-color: #c64b3e;
          line-height: 90px;
          border: 4px solid #e0a29d;
          font-size: 0;
          .s1{
            width: 50%;
            display: inline-block;
            background-color: white;
            border-radius: 45px;
            text-align: center;
            color: #c2463a;
            font-size: 50px;

            vertical-align: middle;
          }
          .s2{
            width: 50%;
            height: 100%;
            display: inline-block;
            font-size: 50px;
            color: white;
            text-align: center;
            vertical-align: middle;
          }
        }
      }
      .titlebot{
        font-size: 0;
        margin-top: 50px;

        span{
          display: inline-block;
          width: 50%;
          text-align: center;
          font-size: 50px;
          color: white;
          vertical-align: middle;

          img{
            width: 70px;
            height: 70px;
            vertical-align: middle;
            object-fit: cover;
            margin-right: 20px;
          }
          span{
           width: unset;
            vertical-align: middle;
          }
        }
      }
    }
    .guanzhu{
      .ti{
        text-indent: 30px;
        margin-top: 78px;
        font-size: 40px;
        color: #323233;
        margin-bottom: 45px;
        img{
          width: 50px;
          height: 50px;
          object-fit: cover;
          vertical-align: middle;
          position: relative;
          top: -4px;
        }
      }
      .other::-webkit-scrollbar {
        background-color: transparent;
      }

      .other{
        padding-left: 30px;
        box-sizing: border-box;
        width: 100%;
        border-bottom: 2px solid #ccc;
        display: -webkit-box;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;

        ul{
          width: 200%;
          li{
            position: relative;
            list-style: none;
            margin-right: 60px;
            display: inline-block;
            text-align: center;
            width: 167px;
            .s1{
              display: inline-block;
              width: 155px;
              height: 155px;
              border-radius: 50%;

              img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
                object-fit: cover;
              }
            }
            .s2{
              color: #8b8c8d;
              font-size: 35px;
              overflow:hidden;
              text-align: center;
              text-overflow:ellipsis;
              white-space:nowrap
            }
            .cil{
              width: 50px;
              height: 50px;
              right: 0;
              bottom: 70px;
              position: absolute;
              display: inline-block;
              border-radius: 50%;
              background-color: #de5545;
              img{
                width: 35px;
                margin-left: 7.5px;
                margin-top: 7.5px;
                display: block;
              }
            }
          }
        }
      }
    }
    .fabu{
      width: 100%;
      margin-top: 60px;
      border-bottom: 2px solid #ccc;
      height: 1070px;
      font-size: 0;
      .left{
        width: 135px;
        padding-left: 30px;
        box-sizing: border-box;
        position: relative;
        float: left;
        .s1{
          display: inline-block;
          width: 120px;
          height: 120px;
          border-radius: 50%;
          background-color: aqua;
          img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
          }
        }
        .s2{
          width: 50px;
          height: 50px;
          right: -15px;
          bottom: 20px;
          position: absolute;
          display: inline-block;
          border-radius: 50%;
          background-color: #de5545;
          img{
            width: 35px;
            margin-left: 7.5px;
            margin-top: 7.5px;
            display: block;
          }
        }
      }
      .right{
        width: 1110px;
        float: left;
        box-sizing: border-box;
        padding-left:45px;
        .ptitle{
          width: 100%;
          line-height: 60px;
          .s1{
            font-size: 40px;
            color: #5c7dac;
            display: inline-block;
            vertical-align: middle;
          }
          .s2{
            font-size: 40px;
            color: #323233;
            margin-left: 30px;
            display: inline-block;
            vertical-align: middle;
          }
        }

        .p1{
          font-size: 30px;
          color: #A2A3A4;
        }
        .snk {
          width: 100%;
          font-size: 45px;
          padding-top: 60px;
          padding-right: 55px;
          box-sizing: border-box;
        }
        .play{
          margin-top: 30px;
          padding-right: 30px;
          box-sizing: border-box;
          video{
            width: 100%;
            height: 580px;
            background-color: aqua;
            border-radius: 20px;
          }
          .pl{
            width: 100%;
            box-sizing: border-box;
            padding-top: 67px;
            position: relative;
            .s4{
              width: unset;
              position: absolute;
              right:0;
            }
            span{
              display: inline-block;
              vertical-align: middle;
              width: 220px;
              text-align: left;
              font-size: 40px;
              color: #969798;
              img{
                width: 50px;
                vertical-align: middle;
              }
            }
          }
        }

      }
    }
  }
</style>
